<template>
<!-- // 当前模板是视频流好友分享模板支持多张海报生成 -->
  <view class="fixed_box" @click.stop="cancelShareFn">
    <div class="publicPopup_box">
      <swiper
        @click.stop=""
        class="swiper_box"
        :duration="500"
        :current="current"
        @change="posterChange"
        @transition="transitionFn"
        :class="{'pointer_events':disableTouch}"
      >
        <swiper-item class="swiper-item_box" v-for="(item , index) in swiperList" :key="index" @click.stop="">
          <div class="dynamic_mgs_box">
            <div class="mp_name_box"><image class="img_box" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/logo2_icon.png"/><span>速速团</span></div>
            <div class="share_title_box">{{item.title}}</div>
            <view class="share_msg_box">
              <view class="load_box">
              <image class="load_img_box" src="https://image.qqpyyds.com/mpAppImg/icon/load_img.gif" alt="" />
              </view>
              <image class="share_img_box" mode="aspectFill" :src="item.url" :id="`img${index}`"/>
            </view>
            <div class="share_mini_program">
              <image class="mini_program_icon" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share6_icon.png" />
              <span>小程序</span>
            </div>
          </div>
        </swiper-item>
      </swiper>
      <!-- 卡片点 -->
      <view class="spot_list" v-if="swiperList.length>1">
        <view v-for="(spot , spotIndex) in swiperList" :key="spotIndex" :class="{'spot_box':true,'spot_box_av':current==spotIndex}"></view>
      </view>
      <!-- 卡片点 -->
    </div>
    <div class="share_btn_list">
      <div class="share_box">
        <button open-type="share" id="sharewx" class="share_btn_box" hover-class="hover" @click.stop="cancelShareFn">
          <image class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share3_icon.png" />
          <span>分享给朋友</span>
        </button>
        <button class="share_btn_box" hover-class="hover" @click.stop="posterFn">
          <image class="cover_image" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share2_icon.png" />
          <span>生成海报</span>
        </button>
      </div>
      <button class="cancel_btn" hover-class="hover" @click.stop="cancelShareFn">取消</button>
    </div>

    <!-- 分享图片绘制 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="shareSuccess" />

  </view>
</template>
<script>
import Util from "@/api/util.js";
// 分享绘制
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
export default {
  props: {
    shareVideoData: {
      type: Object,
      default: {},
    }
  },
  components: {
    OpenGroupSharing
  },
  data () {
    return {
      current: 0,
      swiperList: [], // 分享卡片
      shareCanvasData: {}, // 需要绘制的数据
      disableTouch: true,
      isShareType: 0, // 卡片类型
    }
  },
  created () {
  },
  mounted () {
    if (this.shareVideoData.isShareType) { // 默认不传根据是否有商品判断是动态分享还是团购
      this.isShareType = this.shareVideoData.isShareType
    } else {
      this.isShareType = this.shareVideoData.isGroup==2?1:0
    }
    if (this.shareVideoData.swiperMun) { // 需要的海报张数，有携带swiperMun
      this.swiperMun = this.shareVideoData.swiperMun
    } else {
      this.swiperMun = 1
    }
    if (this.swiperMun>1) this.disableTouch = false // 海报张数超过1张开启活动功能
    for (let index = 0; index < this.swiperMun; index++) { // 遍历需要的卡片数量轮播DOME
      let data_ = {url: '', isShow: true}
      let title_ = this.shareVideoData.title || this.shareVideoData.content
      if (!title_) { // 没有标题添加默认标题
        if (this.isShareType == 0) title_ = `发布了一个新的视频，快来看看吧！`
        if (this.isShareType == 1) title_ = `发布了一个新的视频团购，快来购买吧！`
        if (this.isShareType == 2) title_ = `发布了一个新的视频团购，快来一键帮卖，轻松赚佣金！`
      }
      data_ = {
        ...data_,
        title: title_,
      }
      this.swiperList.push(data_)
    }
    this.drawShareImgFn() // 绘制分享图片
  },
  methods: {
    drawShareImgFn () {
      this.shareCanvasData = {}
      this.shareCanvasData = {
        userAvatar: this.shareVideoData.communityLogo || this.shareVideoData.avatar,// 团长头像
        userNickname: this.shareVideoData.communityName || this.shareVideoData.nickname,// 名字
        bgImgUrl: this.shareVideoData.dynamicMediaVOList[0].thumbnail,// 背景图片
        type: this.isShareType, //0动态 1开团成功,团购成功 2帮卖
      }
      if (this.isShareType == 1) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          btnText: '跟团购买',
          salePrice: this.shareVideoData.minSalePrice,
        }
      }
      if (this.isShareType == 2) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          btnText: '帮卖立赚',
        }
      }
      if ([1,2].includes(this.isShareType)) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          followGroupNumber: this.shareVideoData.totalBuyCount>0?this.playvolumeFn(this.shareVideoData.totalBuyCount)+'人跟团中':'一大波人赶来中', // 跟团人数
        }
      }
      // 区别视频\图文
      if (this.shareVideoData.mediaType === 1) {
        this.shareCanvasData.isGoods = true
      }
      this.$refs.shareChild.shareFrends(this.shareCanvasData)
    },
    // 团购/邀请帮卖/动态绘图成功
    shareSuccess (res) {
      if (res.code == 200) {
        this.swiperList[0] = {
          ...this.swiperList[0],
          url: res.url,
          isShareType: res.type
        }
        this.$forceUpdate()
        this.$store.commit('PAGE_SHARING_DATA', this.swiperList[0]) // 保存需要分享的数据到数据仓库
      }
    },
    transitionFn (e) {
      // console.log(e,'transitionFn')
    },
    posterChange (e) {  // 多张分享图
      this.current = e.detail.current
      this.$store.commit('PAGE_SHARING_DATA', this.swiperList[this.current]) // 保存需要分享的数据到数据仓库
    },
    posterFn () {
      this.$emit('posterFn',this.shareVideoData)
    },
    cancelShareFn () {
      this.$emit('cancelShareFn', false)
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
  }
}
</script>
<style lang="scss" scoped>
.fixed_box {
  .pointer_events {
    pointer-events: none;
  }
  .publicPopup_box {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    .swiper_box {
      height: 650rpx;
      .swiper-item_box {
        display: flex;
        justify-content: center;
        align-items: center;
        .dynamic_mgs_box {
          width: 520rpx;
          height: 100%;
          padding: 30rpx 20rpx 0rpx 20rpx;
          background-color: #fff;
          box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 208, 13, 0.32);
          border-radius: 16rpx;
          position: relative;
          z-index: 9;
          .mp_name_box {
            display: flex;
            align-items: center;
            .img_box {
              width: 44rpx;
              height: 44rpx;
              display: block;
              margin-right: 16rpx;
              border-radius: 50%;
            }
            span {
              font-size: 24rpx;
              font-weight: bolder;
              color: rgba(0, 0, 0, 0.6);
            }
          }
          .share_title_box {
            height: 96rpx;
            margin-top: 12rpx;
            width: 100%;
            font-size: 32rpx;
            line-height: 48rpx;
            color: #323232;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .share_msg_box {
            width: 100%;
            display: block;
            padding: 8rpx 0 18rpx 0;
            background-color: #fff;
            border-radius: 16rpx;
            position: relative;
            display: flex;
            justify-content: center;
            .load_box {
              width: 100%;
              height: 384rpx;
              position: absolute;
              top: 8rpx;
              left: 0;
              .load_img_box  {
                width: 64rpx;
                height: 64rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
              }
            }
            .share_img_box {
              width: 480rpx;
              height: 384rpx;
              display: block;
              border-radius: 4rpx;
              overflow: hidden;
              position: relative;
              z-index: 9;
            }
          }
          .share_mini_program {
            display: flex;
            align-items: center;
            border-top: 2rpx solid #dcdee0;
            color: rgba(0, 0, 0, 0.6);
            font-size: 24rpx;
            padding: 12rpx 0;
            .mini_program_icon {
              width: 24rpx;
              height: 22rpx;
              margin-right: 8rpx;
            }
          }
        }
      }
    }
  }
  .share_btn_list {
    width: 100%;
    position: absolute;
    left: 0rpx;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
    background: #FFF;
    border-radius: 24rpx 24rpx 0 0;
    .share_box {
      display: flex;
      padding: 48rpx;
      .share_btn_box {
        width: 50%;
        .cover_image {
          display: block;
          margin: 0 auto 0;
          width: 72rpx;
          height: 72rpx;
        }
        span {
          display: block;
          margin: 12rpx auto 0;
          font-size: 24rpx;
          color: #646566;
        }
      }
    }
    .cancel_btn {
      padding: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #969799;
      box-shadow: inset 0rpx 2rpx 0rpx #F2F3F5;
      line-height: 40rpx;
    }
  }
}
</style>
